<template>
<div class="container">
  <headers title="微博" :refresh="isRefresh" path="/home"></headers>
  <div class="bar bar-header-secondary">
    <div class="searchbar">
      <a class="searchbar-cancel" @click="doSearch">搜索</a>
      <div class="search-input">
        <label class="icon icon-search" for="search"></label>
        <input type="search" id='search' v-model="votedName" placeholder='请输入您要搜索的内容'/>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="row no-gutter bg-color-white size-12">
      <div class="col-33 icon-toupiao">
        <a v-link="{path: '/rebuild_primary', replace: true}">
          <img src="../assets/images/public/primary.png" alt="初级粉">
          <span class="icon-label">初级粉</span>
        </a>
      </div>
      <div class="col-33 icon-toupiao">
        <a v-link="{path: '/rebuild_mid', replace: true}">
          <img src="../assets/images/public/high.png" alt="高级粉">
          <span class="icon-label">高级粉</span>
        </a>
      </div>
      <div class="col-33 icon-toupiao">
        <a v-link="{path: '/rebuild_high', replace: true}">
          <img src="../assets/images/public/top.png" alt="顶级粉">
          <span class="icon-label">顶级粉</span>
        </a>
      </div>
    </div>
    <div class="list-block media-list no-margin mar-top-10" v-for="task in tasks">
      <ul>
        <li class="item-content">
          <div class="col-100">
            <div class="item-title-row task-header">
              <div class="item-title color-light">任务ID：{{task.id}}</div>
              <div class="item-after color-light">类型：{{task.micrBlogTypeId | formatTypeName}}</div>
            </div>
            <div class="item-title-row task-body">
              <div class="item-title">微博名称：{{task.name}}</div>
            </div>
            <div class="item-title-row task-footer">
              <div class="item-title">发布时间：{{task.createDateView | formatDate}}</div>
            </div>
            <div class="item-title-row task-footer">
              <div class="item-title">总量：<span>{{task.count}}</span>件</div>
            </div>
            <div class="item-title-row task-footer">
              <div class="item-title">状态：<span class="color-danger">{{formatStatus(task.status,task.statusCode)}}</span></div>
            </div>
            <div class="item-title-row task-bottom">
              <div class="item-title row no-gutter">
                <span v-if="task.statusCode != 0" class="col-50" @click="suspendTask(task.id)">
                  <i class="icon1 icon-lock"></i> 冻结
                </span>
                <span class="col-50" style="margin-left:-4px;">
                  <a v-link="{path: '/jiapiao/' + task.id + '/2', replace: true}">
                    <i class="icon1 icon-plus"></i> 加票
                  </a>
                </span>
                <span v-if="task.statusCode == 0" class="col-50" style="margin-left:-4px;" @click="thawTask(task.id)">
                  <i class="icon1 icon-lock"></i> 解冻
                </span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <nav class="bar bar-tab">
    <a class="tab-item" v-link="{path: '/home', replace: true}">
      <span class="icon icon2 home-icon"></span>
      <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" v-link="{path: '/bill/2', replace: true}">
      <span class="icon icon2 refund-icon"></span>
      <span class="tab-label">返还</span>
      <span class="badge">0</span>
    </a>
    <a class="tab-item" v-link="{path: '/chongzhi', replace: true}">
      <span class="icon icon2 chongzhi-icon"></span>
      <span class="tab-label">充值</span>
    </a>
  </nav>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'
import store from '../assets/js/store.min.js'

export default {
  ready () {
    $.init()
    this.getSelfTask()
    this.findAppMicrBlogType()
  },
  data () {
    return {
      tasks: [],
      customerId: store('customerId') || 0,
      voteTypes: [],
      votedName: '',
      isRefresh: true
    }
  },
  methods: {
    findAppMicrBlogType () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findAppMicrBlogType')
      .then((data) => {
        this.$set('voteTypes', data.data)
      })
    },
    getSelfTask () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findOwnMicrBlog/' + this.customerId)
      .then((data) => {
        this.$set('tasks', data.data)
      })
    },
    doSearch () {
      this.getSelfTask()
    },
    suspendTask (taskid) {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/suspendTask?id=' + taskid)
      .then((data) => {
        this.tasks.forEach((val, key) => {
          if (val.id === taskid) {
            this.tasks[key].statusCode = 0
          }
        })
      })
    },
    thawTask (taskid) {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/unfreezTask?id=' + taskid)
      .then((data) => {
        this.tasks.forEach((val, key) => {
          if (val.id === taskid) {
            this.tasks[key].statusCode = 1
          }
        })
      })
    },
    formatStatus (state, statusCode) {
      if (state === 0) {
        if (statusCode === 0) {
          return '已冻结'
        }
        return '待开始'
      }
      else if (state === 1) {
        return '进行中'
      }
      else if (state === 2) {
        return '已完成'
      }
      return '未知状态'
    }
  },
  filters: {
    formatDate (date) {
      return date.substr(0, 10)
    },
    formatTypeName (typeid) {
      let typeName = ''
      this.voteTypes.forEach((val, key) => {
        if (val.id === typeid) {
          typeName = val.name
        }
      })
      if (typeName) {
        return typeName
      }
      return '未知类型'
    }
  },
  components: {
    Headers
  }
}
</script>
<style scoped>
a{color:#3d4145;}
.col-100{
  width:100%;
}
.bar .searchbar{
  background-color:#f2f3f8;
}
.bar .searchbar .searchbar-cancel {
  color:#ffffff;
  border:1px #0894ec solid;
  background-color:#0894ec;
  border-radius:4px;
}
.icon-toupiao{
  padding:20px;
}
.icon-toupiao img{
  width:100%;
  height:auto;
}
.icon-toupiao .icon-label{
  width:100%;
  text-align:center;
  display:inline-block;
}
.task-header{
  padding-top:10px;
  padding-bottom:9px;
}
.task-header,.task-body,.task-footer{
  padding-left:15px;
  padding-right:15px;
}
.task-body{
  padding-top:10px;
  padding-bottom:5px;
}
.task-footer{
  color:#959595;
  padding-bottom:5px;
}
.task-header:after{
  content:'';
  position:absolute;
  left:0;
  top:40px;
  bottom:auto;
  right:auto;
  height:1px;
  width:100%;
  background-color:#e7e7e7;
  display:block;
  z-index:15;
  -webkit-transform-origin:50% 0;
  transform-origin:50% 0;
}
.task-body .item-title{
  white-space:normal;
}
.task-bottom .item-title{
  width:100%;
}
.task-bottom .item-title:before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:auto;
  right:auto;
  height:1px;
  width:100%;
  background-color:#e7e7e7;
  display:block;
  z-index:15;
  -webkit-transform-origin:50% 0;
  transform-origin:50% 0;
}
.task-bottom span{
  height:40px;
  line-height:40px;
  text-align:center;
  display:inline-block;
}
.task-bottom span:nth-last-child(1):before{
  content:'';
  position:absolute;
  left:50%;
  top:10px;
  bottom:auto;
  right:auto;
  height:50%;
  width:1px;
  background-color:#e7e7e7;
  display:block;
  z-index:15;
  -webkit-transform-origin:50% 0;
  transform-origin:50% 0;
}
.icon1 {
  width:14px;
  height:14px;
  display:inline-block;
  vertical-align:middle;
  background-size:100% 100%;
  background-position:center;
  -webkit-font-smoothing:antialiased;
  -webkit-text-stroke-width:.2px;
  -moz-osx-font-smoothing:grayscale;
}
.icon1.icon-lock{
  background-image:url(../assets/images/public/icon-lock.png);
}
.icon1.icon-review{
  background-image:url(../assets/images/public/icon-review.png);
}
.icon1.icon-plus{
  background-image:url(../assets/images/public/icon-plus.png);
}
.task-bottom .col-33 {
  width: 33.333333333333336%;
  margin: 0;
}
.list-block:last-child{
  margin-bottom:58px!important;
}
</style>